<template>
  <div class="knowledge-div" v-if="currentDisplayItem != null" style="margin-left: 247px;">
    <div :style="currentDisplayItemLocationStyle">
      <div :id="currentDisplayRef">
        <knowledge-item-div :type="currentItemType" :content="currentDisplayItem.content" size-type="big"></knowledge-item-div>
      </div>
    </div>
  </div>
</template>

<script>
import {getDomById} from "../utils/domUtil";
import KnowledgeItemDiv from "@/components/KnowledgeItemDiv";

export default {
  name: "DisplayCurrentItem",
  components: {
    KnowledgeItemDiv
  },
  props: {
    currentItemType: String,
    currentDisplayItem: Object,
    timeToMoveAside: Boolean
  },
  data() {
    return {
      currentDisplayRef: `currentDisplay${this.currentItemType.charAt(0).toUpperCase()}${this.currentItemType.slice(1)}`
    }
  },
  watch: {
    timeToMoveAside(val) {
      if (!val) {
        return;
      }
      let displayItem = getDomById(this.currentDisplayRef);
      if (displayItem === null) {
        return;
      }
      displayItem.classList.add(`${this.currentItemType}-second-animate`);
      getDomById('pptBackground').classList.add("not-click");
      displayItem.addEventListener('animationend', () => {
        getDomById('pptBackground').classList.remove("not-click");
        getDomById('pptBackground').classList.add("can-click");
      }, false)
    }
  },
  computed: {
    currentDisplayItemLocationStyle() {
      return 'position: absolute;left: 510px;';
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/scss/layout.scss";
@import "../assets/scss/div.scss";
@import "../assets/scss/animate.scss";
@import "../assets/scss/color.scss";

.knowledge-div {
  @include position-abs-bottom(25%);
  width: $knowledge-div-width;
  height: $knowledge-div-height;
}

.word-first-animate {
  @include move-aside-animate(word-first-animate, -914px, -1216px);
}

.word-first-half-animate {
  @include move-aside-animate(word-first-half-animate, -1307px, -1216px);
}

.word-second-animate {
  @include move-aside-animate(word-second-animate, -1690px, -1216px);
}

.word-second-half-animate {
  @include move-aside-animate(word-second-half-animate, -2092px, -1216px);
}

.word-third-animate {
  @include move-aside-animate(word-third-animate, -2484px, -1216px);
}

.grammar-first-animate {
  @include move-aside-animate(grammar-first-animate, 2497px, -1216px);
}

.grammar-first-half-animate {
  @include move-aside-animate(grammar-first-half-animate, 2102px, -1216px);
}

.grammar-second-animate {
  @include move-aside-animate(grammar-second-animate, 1719px, -1216px);
}

.grammar-second-half-animate {
  @include move-aside-animate(grammar-second-half-animate, 1320px, -1216px);
}

.grammar-third-animate {
  @include move-aside-animate(grammar-third-animate, 924px, -1216px);
}
</style>